<template>
  <div class="factory-offline table-theme">
    <head-title title="合作-工厂信息"></head-title>
    <el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="styleList"
						:value="form.style_id"
						placeholder="风格分类"
						type="style_id"
						@value="setSelectValue"
						label-name="style_name"
						value-name="style_id"
						multiple
					>
					</select-view>
          <select-view
						:option-list="cooperationList"
						:value="form.is_cooperation"
						placeholder="是否合作"
						type="is_cooperation"
						@value="setSelectValue"
						label-name="label"
						value-name="value"
					>
					</select-view>
          <select-view
						:option-list="factory_type"
						:value="form.factory_type"
						placeholder="工厂类型"
						type="factory_type"
						@value="setSelectValue"
						label-name="type_name"
						value-name="type_id"
            multiple
					>
					</select-view>
          <select-view
						:option-list="hallList"
						:value="form.is_hall"
						placeholder="是否有展厅"
						type="is_hall"
						@value="setSelectValue"
						label-name="label"
						value-name="value"
					>
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add" style="margin-top: 5px;margin-right: 10px;">
            <el-button type="primary" size="small" @click="addFactory()">添加</el-button>
						<el-button type="primary" size="small" @click="onExport">导出</el-button>
					</div>
				</div>
			</div>
			<p class="data-number">总数：{{ total }}</p>
			<el-table :data="list">
				<el-table-column label="序号" align="center" prop="factory_id" width="80"></el-table-column>
        <el-table-column label="省份" align="center" prop="province" width="120"></el-table-column>
        <el-table-column label="工厂名称" align="center" prop="factory_name"></el-table-column>
        <el-table-column label="工厂类型" align="center" prop="factory_type_name"></el-table-column>
        <el-table-column label="产品类型" align="center" prop="goods_type"></el-table-column>
        <el-table-column label="产品风格" align="center" prop="style_name"></el-table-column>
        <el-table-column label="联系人" align="center" prop="contacts_name"></el-table-column>
        <el-table-column label="职位" align="center" prop="position"></el-table-column>
        <el-table-column label="电话" align="center" prop="contacts_phone" width="160"></el-table-column>
        <el-table-column label="是否验厂" align="center" prop="is_check"></el-table-column>
        <el-table-column label="是否有展厅" align="center" prop="is_hall" width="100"></el-table-column>
        <el-table-column label="是否有产品图" align="center" prop="is_goods_img" width="120"></el-table-column>
        <el-table-column label="交期" align="center">
          <template #default="{row}">{{row.send_id}}天</template>
        </el-table-column>
        <el-table-column label="地址" align="center" width="300" show-overflow-tooltip>
          <template #default="{row}">{{row.province}}{{row.city}}{{row.area}}{{row.address}}</template>
        </el-table-column>
        <el-table-column label="网址" align="center" width="300" show-overflow-tooltip>
          <template #default="{row}"><a :href="row.website_url" target="_blank">{{row.website_url}}</a></template>
        </el-table-column>
        <el-table-column label="是否已联系" align="center" width="120" prop="is_contact"></el-table-column>
        <el-table-column label="是否已加微信" align="center" width="120" prop="is_join"></el-table-column>
        <el-table-column label="是否已合作" align="center" width="120" prop="is_cooperation"></el-table-column>
        <el-table-column label="添加时间" align="center" width="160" prop="add_time"></el-table-column>
        <el-table-column label="添加人" align="center" prop="create_by"></el-table-column>
				<el-table-column label="操作" align="center" fixed="right" width="120">
					<template slot-scope="scope">
            <el-button type="primary" size="mini" @click="addFactory(scope.row)">编辑</el-button>
            <el-button type="primary" size="mini" @click="del(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
  </div>
</template>

<script>
import SelectView from "@/components/SelectView";
import factory_offline_form from './factory_offline_form.vue'
export default {
  name: 'factory_offline',
  data () {
    return {
      searchOption: [
        {
          value: 0,
          label: "工厂名称",
        },
        {
          value: 1,
          label: "联系人",
        },
        {
          value: 2,
          label: "联系电话",
        },
      ],
      styleList: [],
      factory_type: [],
      cooperationList: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 0
        }
      ],
      hallList: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 0
        }
      ],
      form: {
        style_id: '',
        is_cooperation: '',
        is_hall: '',
        factory_type: '',
        factory_name: '',
        contacts_name: '',
        contacts_phone: '',
      },
      page: 1,
      total: 0,
      list: []
    };
  },
  components: { SelectView },
  computed: {},
  mounted(){
    this.getClassify()
    this.init()
  },
  methods: {
    getClassify() {
      // 风格
      this.$http(this.$ApiList.StyleList).then(res => {
        this.styleList = res.datas;
      });
      // 工厂类型
      this.$http(this.$ApiList.ThirdFactoryType).then(res => {
        this.factory_type = res.datas
      })
    },
    // 初始化列表
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
        ...this.form
      };
      this.$http(this.$ApiList.ThirdFactoryList, data).then(res => {
        this.list = res.datas.data
        this.total = res.datas.count;
      });
    },
    refreshPage() {
      this.form.factory_name = ''
      this.form.contacts_name = ''
      this.form.contacts_phone = ''
      this.init();
    },
    goSearch(e,value) {
      this.form.factory_name = ''
      this.form.contacts_name = ''
      this.form.contacts_phone = ''
      switch (e){
        case 0:
          this.form.factory_name = value
          break;
        case 1:
          this.form.contacts_name = value
          break;
        case 2:
          this.form.contacts_phone = value
          break;
      }
      this.init();
    },
    setSelectValue(obj){
      const { type,value } = obj
      let newVal = ''
      if(typeof value==='object'){
        newVal = value.join(',')
      }else{
        newVal = value
      }
      this.form[type] = value
      this.init()
    },
    // 导出
    onExport(){
      let url = `${this.$domain}furniture/Adminexcel/ThirdFactoryDataExcel?secret=888`
      window.location.href = url
    },
    del(row){
      this.$confirm('是否删除此工厂信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http(this.$ApiList.DelThirdFactory,{factory_id: row.factory_id}).then(res => {
          this.$layer.msg('添加成功');
          this.init()
        })
      }).catch(() => {});
    },
    addFactory(row){
      this.$layer.iframe({
				title: row?'编辑':'添加',
				maxmin: true,
				area: ['50%', '60%'],
				content: {
					content: factory_offline_form, //传递的组件对象
					parent: this, //当前的vue对象
					data: {
            factory_id: row?row.factory_id:0,
            factory_type: this.factory_type,
            styleList: this.styleList
          } //props
				}
			});
    }
  }
}
</script>

<style lang='scss' scoped>

</style>